<template>
  <div>
      <auth-tag  tips="无权访问">
        <div class="edit-title-view"><div class="name">土壤养分</div> <i @click="onClose" title="关闭" class="vxe-icon-close"></i> </div>
         <div style="background-color: #fff;padding:15px">
          <el-tabs v-model="activeName">
          <el-tab-pane label="最新主要土壤养分" name="first">
                <div class="max-title">土壤样品所属区域：{{getTitleLine}} <span style="padding-left:50px">检测时间：{{dataList.length>0?formatDate(dataList[0].testDateTime):'--'}}</span></div>
                <div class="progress-list">
                  <div class="item" v-for="item in progressList">
                    <div class="left-view">
                      <div class="title">{{item.title}}</div>
                      <div class="name">{{item.unit}}</div>
                    </div>
                    <div class="progress-view">
                      <span class="tips">{{item.label}}</span>
                      <el-progress :percentage="item.percentage||0" color="#04AE70" :format="getFormatText"></el-progress>
                      <span class="right-text">{{getRightText(item.type,item.value)}}</span>
                    </div>
                  </div>
                </div>
                <vxe-table
                  border
                  size="mini"
                  :scroll-y="{enabled: true}"
                  :min-height="100"
                  :max-height="300"
                  :data="getObject.testDateTime?[getObject]:[]">
                  <vxe-colgroup :title="getTitle" align="center">
                    <vxe-column field="testDateTime" title="检测日期">
                      <template #default="{ row }">
                        {{formatDate(row.testDateTime)}}
                    </template>
                    </vxe-column>
                    <!-- <vxe-column  show-overflow field="province" title="所属区域">
                      <template #default="{ row }">
                        {{getTitleLine}}
                      </template>
                    </vxe-column> -->
                    <vxe-column field="ph" title="pH(无量纲)"></vxe-column>
                    <vxe-column field="som" title="有机质(%)"></vxe-column>
                    <vxe-column field="tn" title="全氮(g/kg)"></vxe-column>
                    <vxe-column field="an" title="碱解氮(mg/kg)"></vxe-column>
                    <vxe-column field="p" title="有效磷(mg/kg)"></vxe-column>
                    <vxe-column field="k" title="速效钾(mg/kg)"></vxe-column>
                    <vxe-column field="unitWeight" title="土壤容重(g/m3)"></vxe-column>
                    <vxe-column field="s" title="硫(mg/kg)"></vxe-column>
                    <vxe-column field="b" title="有效硼(mg/kg)"></vxe-column>
                    <vxe-column field="source" title="数据来源">
                      <template #default="{ row }">
                        {{row.source==1?'系统':'用户'}}
                      </template>
                    </vxe-column>
                  </vxe-colgroup>
                </vxe-table>
                <div class="max-title">主要土壤养分趋势变化</div>
               <div class="total-view">
                <el-date-picker
                  v-model="value1"
                  type="monthrange"
                  format="YYYY"
                  @change="changeDate"
                  value-format="YYYY"
                  style="width:180px"
                  range-separator="至"
                  start-placeholder="开始"
                  end-placeholder="结束">
                </el-date-picker>
                <div style="padding-left:20px;">共计<span style="padding:0 10px">{{dataList.length}}</span>次土壤检测数据</div>
               </div>
                <div class="chart-list">
                  <div class="item" v-for="item in chartList">
                    <chartView 
                      :title="item.title" 
                      :type="item.type"
                      :list="item.data"
                      :min="item.min"
                      :max="item.max" 
                      :splitNumber="item.splitNumber"
                      :xList="item.xList" />
                  </div>
                </div>
                <div style="text-align: right;">
                  <vxe-switch v-model="showCell" size="small" open-label="隐藏列" close-label="显示列"></vxe-switch>
                </div>
                <vxe-table
                  border
                  style="margin-top:10px"
                  :min-height="100"
                  size="mini"
                  :scroll-y="{enabled: true}"
                  :data="dataList">
                  <vxe-column align="center" field="name" title="检测日期" width="120">
                    <template #default="{ row }">
                        {{formatDate(row.testDateTime)}}
                    </template>
                  </vxe-column>
                  <vxe-colgroup align="center" title="检测指标">
                    <vxe-column align="center" field="ph" title="PH(无量纲)"></vxe-column>
                    <vxe-column align="center" field="som" title="有机质(%)"></vxe-column>
                    <vxe-column align="center" field="tn" title="全氮(g/kg)"></vxe-column>
                    <vxe-column align="center" field="an" title="碱解氮(mg/kg)"></vxe-column>
                    <vxe-column align="center" field="p" title="有效磷(mg/kg)"></vxe-column>
                    <vxe-column align="center" field="k" title="速效钾(mg/kg)"></vxe-column>
                    <vxe-column align="center" field="s" title="硫(mg/kg)"></vxe-column>
                    <vxe-column align="center" field="b" title="有效硼(mg/kg)"></vxe-column>
                    <template v-if="showCell">
                    <vxe-column align="center" field="ec" title="EC值(s/cm)"></vxe-column>
                    <vxe-column align="center" field="unitWeight" title="容重(g/cm3)"></vxe-column>
                    <vxe-column align="center" field="mo" title="总钼(mg/kg)"></vxe-column>
                    <vxe-column align="center" field="fe" title="有效铁(mg/kg)"></vxe-column>
                    <vxe-column align="center" field="mn" title="锰(mg/kg)"></vxe-column>
                    <vxe-column align="center" field="cu" title="铜(mg/kg)"></vxe-column>
                    <vxe-column align="center" field="zn" title="锌(mg/kg)"></vxe-column>
                    <vxe-column align="center" field="cadmium" title="镉(mg/kg)"></vxe-column>
                    <vxe-column align="center" field="cr" title="铬(mg/kg)"></vxe-column>
                    <vxe-column align="center" field="pb" title="铅(mg/kg)"></vxe-column>
                    <vxe-column align="center" field="hg" title="汞(mg/kg)"></vxe-column>
                    <vxe-column align="center" field="arsenic" title="砷(mg/kg)"></vxe-column>
                  </template>
                  </vxe-colgroup>
                  <vxe-column align="center" field="name" title="数据来源">
                    <template #default="{ row }">
                        {{row.source==1?'系统':'用户'}}
                      </template>
                  </vxe-column>
                </vxe-table>
          </el-tab-pane>
          <el-tab-pane label="土壤常见理化指标评价分级标准" name="second">
            <template v-if="activeName=='second'">
                <vxe-table
                  border
                  style="margin-bottom:10px"
                  size="mini"
                  :min-height="60"
                  :data="[{data:'容量',data1:'<1.00',data2:'1.00~1.25',data3:'1.25~1.35',data4:'1.35~1.45',data5:'1.45~1.55',data6:'≥1.55'}]">
                  <vxe-colgroup title="表1 容重分级（g/m3）" align="center">
                    <vxe-column field="data" title="分级" align="center"></vxe-column>
                    <vxe-column field="data1" title="过松" align="center"></vxe-column>
                    <vxe-column field="data2" title="适直" align="center"></vxe-column>
                    <vxe-column field="data3" title="偏紧" align="center"></vxe-column>
                    <vxe-column field="data4" title="紧实" align="center"></vxe-column>
                    <vxe-column field="data5" title="过紧实" align="center"></vxe-column>
                    <vxe-column field="data6" title="坚实" align="center"></vxe-column>
                  </vxe-colgroup>
                </vxe-table>
                <vxe-table
                  border
                  style="margin-bottom:10px"
                  :scroll-y="{enabled: true}"
                  size="mini"
                  :min-height="60"
                  :data="[{data:'PH',data1:'<4.5',data2:'4.5~5.5',data3:'5.5~6.5',data4:'6.5~7.5',data5:'7.5~8.5',data6:'≥8.5'}]">
                  <vxe-colgroup title="表2 酸碱度分级标准表（无量纲）" align="center">
                    <vxe-column field="data" align="center" title="等级"></vxe-column>
                    <vxe-column field="data1" align="center" title="强酸性"></vxe-column>
                    <vxe-column field="data2" align="center" title="酸性"></vxe-column>
                    <vxe-column field="data3" align="center" title="微酸性"></vxe-column>
                    <vxe-column field="data4" align="center" title="中性"></vxe-column>
                    <vxe-column field="data5" align="center" title="微碱性"></vxe-column>
                    <vxe-column field="data6" align="center" title="碱性"></vxe-column>
                  </vxe-colgroup>
                </vxe-table>
                <vxe-table
                  border
                  size="mini"
                  style="margin-bottom:10px"
                  :data="table3">
                  <vxe-colgroup title="表3 有机质、氮磷钾全量养分和有效养分含量分级" align="center">
                    <vxe-column field="data" align="center" title="等级"></vxe-column>
                    <vxe-column field="data1" align="center" title="有机质(%)"></vxe-column>
                    <vxe-column field="data2" align="center" title="全氮 g/kg"></vxe-column>
                    <vxe-column field="data3" align="center" title="全磷 g/kg "></vxe-column>
                    <vxe-column field="data4" align="center" title="全钾 g/kg"></vxe-column>
                    <vxe-column field="data5" align="center"  title="碱解氮 mg/kg"></vxe-column>
                    <vxe-column field="data6" align="center" title="有效磷 mg/kg"></vxe-column>
                    <vxe-column field="data7" align="center" title="速效钾 mg/kg"></vxe-column>
                  </vxe-colgroup>
                </vxe-table>
                <vxe-table
                  border
                  style="margin-bottom:10px"
                  size="mini"
                  :data="table4">
                  <vxe-colgroup align="center" title="表4  有效中量元素和有效微量元素分级  (mg/kg)">
                    <vxe-colgroup title="">
                    <vxe-column field="data" title="等级" align="center"></vxe-column>
                  </vxe-colgroup>
                  <vxe-colgroup title="中量元素" align="center">
                    <vxe-column field="data1" title="有效钙" align="center"></vxe-column>
                    <vxe-column field="data2" title="有效镁" align="center"></vxe-column>
                    <vxe-column field="data3" title="有效硅" align="center"></vxe-column>
                    <vxe-column field="data4" title="有效硫" align="center"></vxe-column>
                  </vxe-colgroup>
                  <vxe-colgroup title="微量元素" align="center">
                    <vxe-column field="data5" title="有效硼" align="center"></vxe-column>
                    <vxe-column field="data6" title="有效钼" align="center"></vxe-column>
                    <vxe-column field="data7" title="有效锰" align="center"></vxe-column>
                    <vxe-column field="data8" title="有效锌" align="center"></vxe-column>
                    <vxe-column field="data9" title="有效铜" align="center"></vxe-column>
                    <vxe-column field="data10" title="有效铁" align="center"></vxe-column>
                  </vxe-colgroup>
                  </vxe-colgroup>
                </vxe-table>
                <vxe-table
                  border
                  style="margin-bottom:10px"
                  size="mini"
                  :data="[{title:'1',data1:'>20',data2:'强'},{title:'2',data1:'10~20',data2:'开'},{title:'3',data1:'<10',data2:'弱'}]">
                  <vxe-colgroup align="center" title="表5 阳离子交换量分级标准表  (cmol(+)/kg土)">
                    <vxe-column align="center" field="title" title="等级"></vxe-column>
                    <vxe-column align="center" field="data1" title="阳离子交换量"></vxe-column>
                    <vxe-column align="center" field="data2" title="保肥性能"></vxe-column>
                  </vxe-colgroup>
                </vxe-table>
                <vxe-table
                  border
                  size="mini"
                  style="margin-bottom:10px"
                  :data="table6">
                  <vxe-colgroup align="center" title="表6 土壤饱和浸出液的电导率与盐分和作物生长关系">
                    <vxe-column align="center" field="data" width="140" title="盐渍化程度"></vxe-column>
                    <vxe-column align="center" field="data1" title="饱和浸出液EC25（dS/m）"></vxe-column>
                    <vxe-column align="center" field="data2" title="盐分（g/kg）"></vxe-column>    
                    <vxe-column align="left" field="data3" title="植物反应"></vxe-column>
                  </vxe-colgroup>
                </vxe-table>
            </template>
          </el-tab-pane>
        </el-tabs>
         </div>
      </auth-tag>
</div>
</template>

<script setup name="Factor-Team-List">
import { nextTick, ref, watch, onActivated, reactive, onMounted,computed } from 'vue'
import { useRouter } from 'vue-router'
import mainLayout from '@/components/custom/mainLayout.vue'
import { useUserStore } from '@/pinia/modules/user'
import {VXETable} from 'vxe-table'
import {getCompositionList,getCompositionStandardList} from '@/api/gis'
import {formatDate} from '@/utils/format'
import chartView from './components/chart.vue'

const userStore = useUserStore()
const activeName = ref('first')
const value1 = ref('')
const showCell = ref(false)
const dataList = ref([])
const chartList = ref([])
const getObject = computed(()=>{
  if(dataList.value.length>0){
    let row = dataList.value[0]
    return row
  }else{
    return {}
  }
})
const getTitle = computed(()=>{
  if(dataList.value.length>0){
    let row = dataList.value[0]
    if(row.province!=row.city){
      return `${row.province}/${row.city}/${row.district}/${row.street}主要土壤养分数据表 (${formatDate(row.testDateTime)})`
    }else{
      return `${row.province}/${row.district}/${row.street}主要土壤养分数据表 (${formatDate(row.testDateTime)})`
    }
    
  }else{
    return '--'
  }
})
const getTitleLine = computed(()=>{
  if(dataList.value.length>0){
    let row = dataList.value[0]
    if(row.province!=row.city){
      return `${row.province}/${row.city}/${row.district}/${row.street}`
    }else{
      return `${row.province}/${row.district}/${row.street}`
    }
  }else{
    return '--'
  }
})
let progressList =ref([])
let table3 =ref([
  {data:'一级（极丰富）',data1:'＞40',data2:'＞1.5',data3:'＞1',data4:'＞25',data5:'＞150',data6:'＞40',data7:'＞200'},
  {data:'二级（丰富）',data1:'30~40',data2:'1.0~1.5',data3:'0.8~1',data4:'20~25',data5:'120~150',data6:'20~40',data7:'150~200'},
  {data:'三级（适量）',data1:'20~30',data2:'0.5~1.0',data3:'0.6~0.8',data4:'15~20',data5:'90~120',data6:'10~20',data7:'100~150'},
  {data:'四级（较缺乏）',data1:'10~20',data2:'0.2~0.5',data3:'0.4~0.6',data4:'10~15',data5:'60~90',data6:'5~10',data7:'50~100'},
  {data:'五级（缺乏）',data1:'6~10',data2:'-',data3:'0.2~0.4',data4:'5~10',data5:'30~60',data6:'3~5',data7:'30~50'},
  {data:'六级（极缺）',data1:'＜6',data2:'-',data3:'＜0.2',data4:'＜5',data5:'＜30',data6:'＜3',data7:'＜30'}
])
let table4 =ref([
  {data:'一级（极丰富）',data1:'＞1000',data2:'>300',data3:'>230',data4:'>30',data5:'>2',data6:'>0.3',data7:'>30',data8:'>3',data9:'>1.8',data10:'>20'},
  {data:'二级（丰富）',data1:'700~1000',data2:'200~300',data3:'115~230',data4:'16~30',data5:'1~2',data6:'0.2~0.3',data7:'15~30',data8:'1.0~3.0',data9:'1.0~1.8',data10:'10~20'},
  {data:'三级（适量）',data1:'500~700',data2:'100~200',data3:'70~115',data4:'<16',data5:'0.5~1',data6:'0.15~0.2',data7:'5~15',data8:'0.5~1.0',data9:'0.2~1.0',data10:'4.5~10'},
  {data:'四级（缺乏）',data1:'300~700',data2:'50~100',data3:'25~70',data4:'-',data5:'0.2~0.5',data6:'0.1~0.15',data7:'1~5',data8:'0.3~0.5',data9:'0.1~0.2',data10:'2.5~4.5'},
  {data:'五级（极缺）',data1:'＜300',data2:'<50',data3:'<25',data4:'-',data5:'<0.2',data6:'<0.1',data7:'<1',data8:'<0.3',data9:'<0.1',data10:'<2.5'}
])

const table6 = ref([
  {data:'1(非盐渍化)', data1:'<2',data2:'<1',data3:'对作物不产生盐害'},
  {data:'2(轻度盐渍化)', data1:'2~4',data2:'1~3',data3:'对盐分极敏感的作物产量可能收到影响'},
  {data:'3(中度盐渍化)', data1:'4~8',data2:'3~5',data3:'对盐分敏感作物产量受到影响，但对耐盐作物无多大影响'},
  {data:'4(重度盐渍化)', data1:'8~16',data2:'5~10',data3:'只有耐盐作物有收成，但影响种子发芽，而且出现缺苗，严重影响产量'},
  {data:'5(极重盐渍化)', data1:'>16',data2:'>10',data3:'只有极少数耐盐植物才能生长'}
])


const emit = defineEmits(['close'])
  onMounted(() => {
    getData({})
    getCompositionStandardList({}).then((res)=>{
      console.log(res,'=========')
    })
  })
  const getData = async (obj)=>{
   let data= userStore.userInfo.farmList.find((item)=>item.farmId==userStore.userInfo.farmId)
    let res = await getCompositionList({
        page:1,
        limit:1000,
        province:data.province,
        city:data.city,
        district:data.district,
        street:data.street,
        testDateTimeEnd: obj.endTime,
        testDateTimeStart:obj.startTime
    })
    if(res.success && res.data.length>0){
      dataList.value = res.data ||[]
      let row = res.data[0]||{}
       progressList.value =[
        {title:'酸碱程度',unit:'PH',type:1,label:row.ph+'无量纲',value:row.ph,percentage:row.ph*10},
        {title:'有机质',unit:'SOM',type:2,label:row.som+'%',value:row.som,percentage:row.som},
        {title:'全氮',unit:'TN',type:3,label:row.tn+'g/kg',value:row.tn,percentage:(row.tn/1.5)*100},
        {title:'碱解氮',unit:'AN',type:4,label:row.an+'mg/kg',value:row.an,percentage:(row.an/150)*100},
        {title:'有效磷 ',unit:'AP',type:5,label:row.p+'mg/kg',value:row.p,percentage:(row.p/40)*100},
        {title:'速效钾 ',unit:'AK',type:6,label:row.k+'mg/kg',value:row.k,percentage:(row.k/200)*100}
      ]
      chartList.value =[
        {title:'近年土壤酸碱度变化趋势(无量纲)',type:1, min:3.5,max:9.5,splitNumber:10, data:res.data.map((item)=>item.ph),xList:res.data.map((item)=>formatDate(item.testDateTime))},
        {title:'近年土壤有机质变化趋势(%)',type:2, min:0,max:50,splitNumber:5,data:res.data.map((item)=>item.som),xList:res.data.map((item)=>formatDate(item.testDateTime))},
        {title:'近年土壤全氮含量变化趋势(g/kg)',type:3, min:0,max:2,splitNumber:5,data:res.data.map((item)=>item.tn),xList:res.data.map((item)=>formatDate(item.testDateTime))},
        {title:'近年土壤碱解氮含量变化趋势(mg/kg)',type:4, min:0,max:180,splitNumber:5,data:res.data.map((item)=>item.an),xList:res.data.map((item)=>formatDate(item.testDateTime))},
        {title:'近年土壤有效磷含量变化趋势(mg/kg)',type:5, min:0,max:50,splitNumber:5,data:res.data.map((item)=>item.p),xList:res.data.map((item)=>formatDate(item.testDateTime))},
        {title:'近年土壤速效钾含量变化趋势(mg/kg)',type:6, min:0,max:250,splitNumber:5,data:res.data.map((item)=>item.k),xList:res.data.map((item)=>formatDate(item.testDateTime))}
      ]
    }
  }
  const getFormatText=(percentage)=> {
      return ''
  }

  const getRightText=(type,data)=> {
    let value =Number(data||0)
     if(type==1){
        return getPh(value)
     }else if(type==2){
       return getSOM(value)
     }else if(type==3){
       return getTN(value)
     }else if(type==4){
       return getAN(value)
     }else if(type==5){
       return getP(value)
     }else if(type==6){
       return getK(value)
     }
  }

  const getK=(value)=>{
       if(value>=200){
          return '极丰富'
        }else if(value>=150&&value<200){
          return '丰富' 
        }else if(value>=100&&value<150){
          return '适量' 
        }else if(value>=50&&value<100){
          return '较缺乏' 
        }else if(value>=30&&value<50){
          return '缺乏' 
        }else{
          return '极缺'
      }
   }

  const getP=(value)=>{
       if(value>=40){
          return '极丰富'
        }else if(value>=20&&value<40){
          return '丰富' 
        }else if(value>=10&&value<20){
          return '适量' 
        }else if(value>=5&&value<10){
          return '较缺乏' 
        }else if(value>=3&&value<5){
          return '缺乏' 
        }else{
          return '极缺'
      }
   }
  
  const getAN=(value)=>{
       if(value>=150){
          return '极丰富'
        }else if(value>=120&&value<150){
          return '丰富' 
        }else if(value>=90&&value<120){
          return '适量' 
        }else if(value>=60&&value<90){
          return '较缺乏' 
        }else if(value>=30&&value<60){
          return '缺乏' 
        }else{
          return '极缺'
      }
   }
  
  const getTN=(value)=>{
       if(value>=1.5){
          return '极丰富'
        }else if(value>=1&&value<1.5){
          return '丰富' 
        }else if(value>=0.5&&value<1){
          return '适量' 
        }else if(value>=0.25&&value<0.5){
          return '较缺乏' 
        }else if(value>=0.2&&value<0.25){
          return '缺乏' 
        }else{
          return '极缺'
      }
   }

  const getSOM=(value)=>{
       if(value>=40){
          return '极丰富'
        }else if(value>=30&&value<40){
          return '丰富' 
        }else if(value>=20&&value<30){
          return '适量' 
        }else if(value>=10&&value<20){
          return '较缺乏' 
        }else if(value>=6&&value<10){
          return '缺乏' 
        }else{
          return '极缺'
      }
   }

   const getPh=(value)=>{
       if(value>=8.5){
          return '碱性'
        }else if(value>7.5&&value<8.5){
          return '微碱性' 
        }else if(value>6.5&&value<7.5){
          return '中性' 
        }else if(value>5.5&&value<6.5){
          return '微酸性' 
        }else if(value>4.5&&value<5.5){
          return '酸性' 
        }else{
          return '强酸性'
      }
   }
  
  const changeDate = (val)=>{
    if(val){
      getData({startTime:val[0],endTime:val[1]})
    }else{
      getData({})
    }
  }

const onClose = ()=>{
    emit('close')
}

</script>

<style lang="scss" scoped>
.edit-title-view{
  display:flex;
  justify-content: space-between;
  padding:13px 10px;
  border-bottom: 1px solid #ddd;
  background-color: #fff;
  .name{
    font-size:15px;
    font-weight: bold;
  }
  .vxe-icon-close{
    font-size:16px;
    color:#888;
    cursor: pointer;
  }
}
.max-title{
  font-size:15px;
  position: relative;
  padding:20px 0;
  color:#333;
  font-weight: bold;
  text-indent:5px;
  &::after{
    position: absolute;
    content: "";
    height: 15px;
    width: 2px;
    background-color: #04AE70;
    left: 0;
    top:50%;
    margin-top:-7.5px;
  }
}
.progress-list{
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  padding:20px 0;
  .item{
    position: relative;
    width: 30%;
    display: flex;
    align-items: center;
    margin-bottom:20px;
    .left-view{
      width: 100px;
      text-align: center;
      font-size:13px;
      color:#333;
    }
    .progress-view{
      width:60%;
      position: relative;
      .tips{
        position: absolute;
        font-size: 13px;
        color: #333;
        top: -28px;
      }
      .right-text{
        position: absolute;
        right: 0;
        font-size: 13px;
        color: #333;
        top: -5px;
        width:40px;
      }
    }
  }
}
.chart-list{
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  padding-top:20px;
  .item{
    height:300px;
    width:30%;
    margin: 10px auto;
    position: relative;
  }
}
.total-view{
  display: flex;
  align-items: center;
  font-size:15px;
  color: #333;
}
</style>
